<!--  -->
<template>
  <div id="BAM-returnReason">
    <!-- 中间 -->
    <div class="returnReason-content">
      <div class="content-top">
        <i class="el-icon-tickets"></i>
        <span>数据列表</span>
         
      </div>
    <template>
    <div>
        <!-- 表格 -->
        <el-table :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)" style="width: 100%">
           <el-table-column type="selection" width="55" align="center"></el-table-column>
          <el-table-column type="index" label="编号" width="55" align="center"></el-table-column>
          <el-table-column prop="_id" label="原因类型" align="center" width="180"></el-table-column>
          <el-table-column prop="authority" label="排序" width="180" align="center"></el-table-column>
          <el-table-column prop='authority' label="是否可用" width="80" align="center">
            <template slot-scope="scope" >
           <el-switch
            v-model="scope.row.ifokno"
            on-color="#00A854"
            on-text="启动"
            on-value="true"
            off-color="#F04134"
            off-text="禁止"
            off-value="false"
          ></el-switch>

            </template>
          </el-table-column>
          <el-table-column prop="logintiem" label="添加时间" width="180" align="center"></el-table-column>

          <el-table-column label="操作" width="220" align="center">
            <el-button size="mini">编辑</el-button>
            <el-button size="mini">删除</el-button>
          </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <div class="block" style="margin-top:15px;">
            <el-pagination align='center' @size-change="handleSizeChange" @current-change="handleCurrentChange" 
            :current-page="currentPage" 
            :page-sizes="[5,10]" 
            :page-size="pageSize" 
            layout="total, sizes, prev, pager, next, jumper" 
            :total="tableData.length">
            </el-pagination>
        </div>
    </div>
    </template>
    </div>
  </div>
</template>
<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
const axios = require("axios");
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      searchNumber: "",
      applyTime: "",
      resStatus: [],
      handleStatus: "",
      tableData: [],
      id: "0",
      operator: "",
      processingTime: "",
      sum: 0,
      value: true,
      currentPage:1,
      pageSize:5
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    ss(i){
    this.tableData[i]['ifokno']= !this.tableData[i]['ifokno']
    },  
    querySearch(queryString, cb) {
      var resStatus = this.resStatus;
      var results = queryString
        ? resStatus.filter(this.createFilter(queryString))
        : resStatus;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
          0
        );
      };
    },
    StatusAll() {
      return [
        { value: "待付款" },
        { value: "待发货" },
        { value: "已发货" },
        { value: "已完成" },
        { value: "已关闭" },
      ];
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.currentPage = 1;
      this.pageSize = val;
    },
    async handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.currentPage = val;
    },
    // 刷新
    async refresh(pageNum, sum) {
      let result = await axios.get("http://49.233.65.169:3000/api/userlist", );
      // console.log(result);
      if (sum != null) {
        return result.count;
      }
      return result.data;
    },
    // 重置
    reset() {
      this.searchNumber = "";
      this.applyTime = "";
      this.handleStatus = "";
      this.operator = "";
      this.processingTime = "";
    },
    // 转换时间类型
    formatTime(row, column) {
      let time = row[column.property] * 1000;
      let date = new Date(time);
      // console.log(new Date(time))
      return formatDate(date, "yyyy-MM-dd hh:mm");
    },
    },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  async mounted() {
    this.resStatus = this.StatusAll();
    this.tableData = await this.refresh();
//     this.tableData.forEach((item,index)=>{
//       // console.log(item);
//    item.ifokno=true
// });
// console.log(this.tableData);
    this.sum = await this.refresh(1, "");

    //     axios.post('http://49.233.65.169:3000/api/orderadd',{
    //   ordername:'123',
    //   ordernum:'123123',
    //   ordermoney:'1000',
    //   orderstate:'已支付',
    //   playmoney:'支付宝',
    //   ordertiem:'1596504760'
    // }).then((data) =>{
    //    console.log(data)
    // }).catch((error) =>{
    //   console.log(error)
    // })
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='less'  scoped>
#BAM-returnReason {
  padding: 20px;
}

.returnReason-content {
  .content-top {
    border: 1px solid #cccccc;
    padding: 20px;
    height: 58px;
    margin-bottom: 20px;
    i.el-icon-tickets {
    }

    span {
    }
  }
  .content-mid {
    el-table-column {
      text-align: center;
    }
  }
}
.returnReason-food {
  display: flex;
  justify-content: flex-end;
}
</style>